<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>宣臻官网</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
</head>
<body>
	<div class="xz">
		<div class="nav-fix">
			<div class="home-wrap">
				<div class="sub-wrap">
					<div class="sub-container">
						<img src="img/logo.png" alt="logo" class="left">
						<div class="sub-list " >
							<ul>
								<li class="cursor"><a href="index.html">首页</a></li>
								<li class="cursor"><a href="introduction.html">公司简介</a></li>
								<li class="cursor selected b-hover">
									业务介绍
									<span></span>
									<div class="three-bar">
										<ul>
											<li><a href="internet.html">互联网+</a></li>
											<li><a href="network.html">网络整合</a></li>
											<li><a href="event.html">活动传播</a></li>
										</ul>
									</div>
								</li>
								<li class="cursor"><a href="caseShow.html">案例展示</a></li>
								<li class="cursor"><a href="join.html">加入我们</a></li>
							</ul>
						</div>
						<div class="s-nav"></div>	
					</div>
				</div>
				<div class="nav-list">
					<ul>
						<li><a href="index.html">首页</a><span></span></li>
						<li><a href="introduction.html">公司简介</a></li>
						<li class="nav-third">
							<div>
								<div class="nav-t-name">业务介绍</div>
								<div class="nav-w">
									<a href="internet.html">互联网+</a>
									<a href="network.html">网络整合</a>
									<a href="event.html">活动传播</a>
								</div>
							</div>
						</li>
						<li><a href="caseShow.html">案例展示</a></li>
						<li><a href="join.html">加入我们</a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="banner-top"></div>
		<div class="network-bg banner">
			<div class="about-title">
				<span>[</span>
				<div class="about-title-content">
					<div>Network Integrated Marketing</div>
					<div>网络整合营销</div>
				</div>
				<span>]</span>
			</div>
		</div>
		<div class="about-text intro-text">
			将创意作为调味剂，提升品牌形象，实现客户利益最大化，是我们的目标。在这里，我们挖掘的不只是脑洞还有品牌内涵，我们坚持以全案策划为载体提升品牌价值，以客户利益为中心，将营销玩出新花样。
		</div>
		<div class="process ">
			<div class="container process-container">
				<div class="title">
					<div class="title-line"></div>
					<div class="title-name our">业务流程</div>
					<div class="title-line"></div>
				</div>
				<div class="svg-wrap">
					<div class="internet-svg">
						<svg id="service" viewBox="0,0,1163,600" class="service-svg">
						<g class="internet-bigger" >
							<image xlink:href="img/process/22.png" x="300" y="0" height="560px" width="570px"></image>
							<g class="hexagon1 hexagon">
								<image xlink:href="img/process/six.png" x="279" y="190" height="74px" width="58px"></image>
								<text x="291" y="238" fill="#7CAEE9">01</text>
								<text x="250" y="286" fill="#000">需求了解</text>
							</g>
							<g class="hexagon2 hexagon">
								<image xlink:href="img/process/six.png" x="475" y="0" height="74px" width="58px"></image>
								<text x="487" y="50" fill="#7CAEE9">02</text>
								<text x="475" y="95" fill="#000">签约</text>
							</g>
							<g class="hexagon3 hexagon">
								<image xlink:href="img/process/six.png" x="768" y="85" height="74px" width="58px"></image>
								<text x="780" y="133" fill="#7CAEE9">03</text>
								<text x="670" y="180" fill="#000">网站分析诊断及策略</text>
							</g>
							<g class="hexagon4 hexagon">
								<image xlink:href="img/process/six.png" x="748" y="236" height="74px" width="58px"></image>
								<text x="760" y="285" fill="#7CAEE9">04</text>
								<text x="670" y="330" fill="#000">关键词研究与分析</text>
							</g>
							<g class="hexagon5 hexagon">
								<image xlink:href="img/process/six.png" x="458" y="316" height="74px" width="58px"></image>
								<text x="471" y="365" fill="#7CAEE9">05</text>
								<text x="370" y="410" fill="#000">网站内容分析及优化</text>
							</g>
							<g class="hexagon6 hexagon">
								<image xlink:href="img/process/six.png" x="358" y="494" height="74px" width="58px"></image>
								<text x="370" y="543" fill="#7CAEE9">06</text>
								<text x="280" y="590" fill="#000">网站内容分析及优化</text>
							</g>
							<g class="hexagon7 hexagon">
								<image xlink:href="img/process/six.png" x="763" y="494" height="74px" width="58px"></image>
								<text x="776" y="544" fill="#7CAEE9">07</text>
								<text x="670" y="590" fill="#000">网站数据监测及分析</text>
							</g>
							<g>
								<pattern id="image1" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100">
							      	<image x="0" y="0"  width="168" height="203" xlink:href="img/process/31.png" ></image>
							    </pattern>
							    <rect x="300" y="80" width="0" height="150" fill="url(#image1)" class="network-img1"/></rect>
						    </g>
						    <g>
							    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100;">
							      	<image x="0" y="0" width="208" height="87" xlink:href="img/process/32.png" ></image>
							    </pattern>
							    <rect x="540" y="50" width="205" height="0" fill="url(#image2)" class="network-img2"/></rect>
						    </g>
						    <g>
							    <pattern id="image3" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100;">
							      	<image x="0" y="0" width="36" height="51" xlink:href="img/process/37.png" ></image>
							    </pattern>
							    <rect x="780" y="190" width="36" height="0" fill="url(#image3)" class="network-img3"/></rect>
						    </g>
						    <g>
							    <pattern id="image4" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100;">
							      	<image x="0" y="0" width="156" height="45" xlink:href="img/process/34.png" ></image>
							    </pattern>
							    <rect x="550" y="337" width="156" height="0" fill="url(#image4)" class="network-img4"/></rect>
						    </g>
						    <g>
							    <pattern id="image5" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100;">
							      	<image x="0" y="0" width="82" height="98" xlink:href="img/process/35.png" ></image>
							    </pattern>
							    <rect x="410" y="420" width="82" height="0" fill="url(#image5)" class="network-img5"/></rect>
						    </g>
						     <g>
							    <pattern id="image6" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1" style="background-position:100 100;">
							      	<image x="0" y="0" width="140" height="35" xlink:href="img/process/36.png" ></image>
							    </pattern>
							    <rect x="520" y="520" width="0" height="35" fill="url(#image6)" class="network-img6"/></rect>
						    </g>
						    </g>
						</svg>
					</div>
				</div>
			</div>
		</div>
		<div class="our-advantage">
			<div class="container">
				<div class="title">
					<div class="title-line"></div>
					<div class="title-name our">我们的优势</div>
					<div class="title-line"></div>
				</div>
			</div>
			<div class="container advantage-wrap network-wrap">
				<div class="ye-wrapper">
					<div class="swiper-slide ye">
		            	<div class="ye-icon">
		            		<img src="img/ye/ce.png">
		            	</div>
		            	<div class="ye-content">
		            		优秀的策划师根据客户需求，深入了解分析企业定位，为客户提供营销策划一站式服务
		            	</div>
		            </div>
		            <div class="swiper-slide ye">
		            	<div class="ye-icon">
		            		<img src="img/ye/seo.png">
		            	</div>
		            	<div class="ye-content">
		            		专业的SEO分析师对网站进行大批量的长尾关键词筛选
		            	</div>
		            </div>
		            <div class="swiper-slide ye">
		            	<div class="ye-icon">
		            		<img src="img/ye/wen.png">
		            	</div>
		            	<div class="ye-content">
		            		稳定的外链团队定期对竞争对手网站进行分析与监控，实时汇聚最新优化结果，调整优化策略，更高效的提高网站排名
		            	</div>
		            </div>
				</div>
				<div class="swiper-container network">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/ce.png">
			            	</div>
			            	<div class="ye-content">
			            		优秀的策划师根据客户需求，深入了解分析企业定位，为客户提供营销策划一站式服务
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/seo.png">
			            	</div>
			            	<div class="ye-content">
			            		专业的SEO分析师对网站进行大批量的长尾关键词筛选
			            	</div>
			            </div>
			            <div class="swiper-slide ye">
			            	<div class="ye-icon">
			            		<img src="img/ye/wen.png">
			            	</div>
			            	<div class="ye-content">
			            		稳定的外链团队定期对竞争对手网站进行分析与监控，实时汇聚最新优化结果，调整优化策略，更高效的提高网站排名
			            	</div>
			            </div>     
			        </div>
			        <div class="swiper-pagination pagination-circle"></div>
			    </div>
			</div>
		</div>
		<div class="back cursor" ></div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/swiper.min.js"></script>
	<script src="js/z.js"></script>
	<script src="js/velocity.min.js"></script>
	<script>
	    // network svg
	    function IsPC() {
		    var userAgentInfo = navigator.userAgent;
		    var Agents = ["Android", "iPhone",
		                "SymbianOS", "Windows Phone",
		                "iPad", "iPod"];
		    var flag = true;
		    for (var v = 0; v < Agents.length; v++) {
		        if (userAgentInfo.indexOf(Agents[v]) > 0) {
		            flag = false;
		            break;
		        }
		    }
		    return flag;
		}
	    var SvgTop = $(".intro-text").offset().top - $(".intro-text").height() - $(".banner-top").height();
		var flag = false;
		if(!IsPC()) {
			setNetSvg();
		}else {
			$(window).scroll(function(){
			 	if( $(window).scrollTop() > SvgTop) {
			 		if(!flag) {
			 			setNetSvg();
			 			flag = true;
			 		}
			 	}
			});
		}
		
		function setNetSvg() {
			$(".hexagon1").velocity({opacity:1},200,function() {
				$(".network-img1").velocity({width: 175},500,function() {
					$(".hexagon2").velocity({opacity:1},200,function() {
						$(".network-img2").velocity({height:87},500,function() {
							$(".hexagon3").velocity({opacity:1},200,function() {
								$(".network-img3").velocity({height:71},500,function() {
									$(".hexagon4").velocity({opacity:1},200,function() {
										$(".network-img4").velocity({height:55},500,function() {
											$(".hexagon5").velocity({opacity:1},200,function() {
												$(".network-img5").velocity({height:98},function() {
													$(".hexagon6").velocity({opacity:1},200,function(){
														$(".network-img6").velocity({width:140},500,function() {
															$(".hexagon7").velocity({opacity:1},200)
														})
													})
												})
											})
										})
									})
								})
							})
						})
					})
				})
			})
			
		}
	</script>
	
</body>
</html>
